<template>
  <custom-navbar title="首页" :leftIcon="false" :leftIconSize="0"></custom-navbar>
  <z-paging ref="paging" v-model="prodcutList" @query="queryList">
    <template #top>
      <custom-navbar title="首页" :leftIcon="false" :leftIconSize="0"></custom-navbar>
      <view class="padding-lr-default search-box mb-20rpx">
        <up-search
          @search="handleSearch"
          searchIcon="scan"
          placeholder="寻找宝贝"
          :clearabled="true"
          :showAction="false"
          :animation="true"
          v-model="searchValue"
        ></up-search>
      </view>
    </template>
    <up-swiper
      :list="swiperList"
      previousMargin="30"
      nextMargin="30"
      circular
      :autoplay="false"
      radius="5"
      bgColor="#ffffff"
    ></up-swiper>
    <view class="mt20-rpx">
      <up-notice-bar text="好消息，好消息，好消息，好消息，好消息"></up-notice-bar>
    </view>
    <template #refresher="{ refresherStatus }">
      <custom-refresher :status="refresherStatus" />
    </template>
    <template #loadingMoreNoMore>
      <custom-nomore />
    </template>
    <view class="padding-lr-default">
      <!-- 商品区域 -->
      <goods-list-item :prodcutList="prodcutList"></goods-list-item>
    </view>
  </z-paging>
  <custom-tabbar :index="0" />
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { productListApi } from '@/api/goods/index.js'
import swiper3 from '@/static/images/swiper3.png'
import swiper2 from '@/static/images/swiper2.png'
import swiper1 from '@/static/images/swiper1.png'
// swiper
const swiperList = ref([swiper3, swiper2, swiper1])
// 搜索
const searchValue = ref('')
const handleSearch = () => {
  uni.navigateTo({
    url: `/pages/search/search?searchValue=${searchValue.value}`
  })
}
// 商品列表
const prodcutList = ref([])
const paging = ref(null)
const queryList = (pageNum, pageSize) => {
  const params = {
    pageNum,
    pageSize
  }
  productListApi(params)
    .then((res) => {
      paging.value.complete(res)
    })
    .catch((res) => {
      paging.value.complete(false)
    })
}
onLoad(() => {})
</script>

<style lang="scss" scoped>
.search-box {
  .u-search {
    flex: initial;
  }
}
</style>
